<template>
    <component is="a-modal" v-model:visible="visible" width="80%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <div style="max-height: 70vh;overflow:auto">
            <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
                <a-form-item label="会员UID" field="user_id">
                    <a-input v-model="paramsData.info.user_id" disabled />
                </a-form-item>
                <a-form-item v-if="paramsData.info?.mobile" label="电话号码" field="name">
                    <a-input disabled v-model="paramsData.info.mobile" placeholder="请输入" />
                </a-form-item>
                <div v-if="paramsData.info.reg_type == 1">
                    <a-form-item label="证件类型" field="type_text">
                        <a-input disabled v-model="paramsData.info.type_text" placeholder="请输入" />
                    </a-form-item>
                </div>
                <a-form-item label="实名类型" field="reg_type_text">
                        <a-input disabled v-model="paramsData.info.reg_type_text" placeholder="请输入" />
                </a-form-item>
                <div v-if="paramsData.info.reg_type == 2">
                    <a-form-item label="公司名称" field="name">
                        <a-input disabled v-model="paramsData.info.name" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="统一编码" field="number">
                        <a-input disabled  v-model="paramsData.info.number" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="法人姓名" field="fuzeren">
                        <a-input disabled v-model="paramsData.info.company.fuzeren" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="法人身份证" field="fuzeren_card">
                        <a-input disabled v-model="paramsData.info.company.fuzeren_card" placeholder="请输入" />
                    </a-form-item>
                </div>
                <div v-else>
                    <a-form-item label="真实姓名" field="name">
                        <a-input disabled v-model="paramsData.info.name" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item :label="paramsData.info.type_text" field="name">
                        <a-input disabled v-model="paramsData.info.number" placeholder="请输入" />
                </a-form-item>
                </div>
                <!-- <a-form-item :label="formData.type_text" field="name">
                        <a-input disabled v-model="formData.number" placeholder="请输入" />
                </a-form-item>
                <a-form-item v-if="paramsData.info?.mobile" label="电话号码" field="name">
                    <a-input v-model="formData.mobile" placeholder="请输入" />
                </a-form-item>
                <a-form-item v-if="paramsData.info?.reg_type" label="实名类型" field="name">
                    <a-input v-model="paramsData.info.reg_type_text" placeholder="请输入" disabled />
                </a-form-item> -->
                <a-form-item label="签署协议" field="name">
                    <div v-if="paramsData?.info?.before_sign_image" style="color:#4c6ef5;cursor: pointer;" @click="openUrl(paramsData.info.before_sign_image)">点击显示</div>
                    <div v-else>无</div>
                </a-form-item>
                <a-form-item label="签约图片" field="name">
                    <div style="color:#4c6ef5;cursor: pointer;" @click="openUrl(paramsData.info.auth_sign)">点击显示</div>
                </a-form-item>
                <a-form-item label="状态" field="state">
                    <sa-radio v-model="formData.state" :data="STATE"></sa-radio>
                </a-form-item>
                <a-form-item label="审核备注" field="remake_id" v-if="formData.state==2">
                    <sa-radio v-model="formData.remake_id" :data="paramsData.remake_list"></sa-radio>
                </a-form-item>
                <a-form-item label="其他" field="message" v-if="formData.remake_id==-1">
                    <a-input  v-model="formData.message" placeholder="请输入" />
                </a-form-item>
            </a-form>
            <div class="photoList">
                <div class="photo" v-if="paramsData?.info?.info?.main_photo">
                    <span>{{ paramsData.info?.reg_type == 2? '公司证件正面照' : '正面照'}}</span>
                    <a-image class="img" :src="paramsData?.info?.info?.main_photo"></a-image>
                </div>
                <div class="photo" v-if="paramsData?.info?.info?.secondary_photo">
                    <span>{{ paramsData.info?.reg_type == 2? '公司证件反面照' : '反面照'}}</span>
                    <a-image class="img" :src="paramsData?.info?.info?.secondary_photo"></a-image>
                </div>
                <div class="photo" v-if="paramsData?.info?.info?.held_photo">
                    <span>手持证件照</span>
                    <a-image class="img" :src="paramsData?.info?.info?.held_photo"></a-image>
                </div>
                <div class="photo" v-if=" paramsData.info.reg_type == 2">
                    <span>法人身份证正面照</span>
                    <a-image class="img"
                        :src="paramsData?.info?.company?.fuzeren_main_photo"></a-image>
                </div>
                <div class="photo"  v-if=" paramsData.info.reg_type == 2">
                    <span>法人身份证反面照</span>
                    <a-image  class="img"
                        :src="paramsData?.info?.company?.fuzeren_secondary_photo"></a-image>
                </div>
            </div>


        </div>




    </component>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import SaRadio from '@cps/sa-radio/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import tool from '@/utils/tool'
const emit = defineEmits(["success"]);
const visible = ref(false);
const title = ref('')
const formRef=ref()
const loading = ref(false);
const formData = reactive({
    name: '',
    number: '',
    mobile: '',
    reg_type: '',
    state: 1,
    reg_type_text:'',
    remake_id: '',
    message: '',
    file: '',
    main_photo: '',
    secondary_photo: '',
    user_id: '',
    id: '',
})
const STATE = [
    { value: 0, title: '待审核' },
    { value: 1, title: '审核通过' },
    { value: 2, title: '审核不通过' },
]
const rules = ref({
    state: [{ required: true, message: '请选择' }],
    remake_id: [{ required: true, message: '请选择' }],
    message: [{ required: true, message: '请输入' }],
});
const open = async (type, data) => {
    console.log('data',data);
    formData.id = data.user_id
    await getData()
    title.value = '审核'
    visible.value = true;
}
const paramsData = ref({
    info: {}
})
const getData = async () => {
    const { data } = await memberApi.auth_update_params(formData.id)
    paramsData.value = { ...data }
    paramsData.value.remake_list = tool.simpleTransformArray(data.remake_list)
    paramsData.value.remake_list?.push({value:-1,title:'其他'})
    console.log('111', paramsData.value);
    setFormData(data.info)
}
const openUrl = (url) => {
    window.open(url)
}
const setFormData = async (data) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            formData[key] = data[key]
            formData.state = 1
        }
    }
    console.log('formData', formData);
}
const submit = async (done) => {
    // console.log('formData', formData);
        const validate = await formRef.value?.validate()
        if (!validate) {
            loading.value = true
            try {
                let data = { ...formData }
                let result = await memberApi.auth_update_check(data)
                if (result.code === 200) {
                    Message.success('操作成功')
                    emit('success')
                    visible.value = false
                    done(true)
                }
                // 防止连续点击提交
                setTimeout(() => {
                    loading.value = false
                }, 500)
            } catch {
                loading.value = false
            }
        }
        done(false)
}
defineExpose({ open });
</script>
<style lang="less" scoped>
.photoList {
    width: 100%;
    max-height: 200px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: center;

    .photo {
        width: 180px;
        height: 180px;
        text-align: center;
        color: #5c7cfa;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 4px;
        margin-right: 100px;

        .img {
            margin-top: 15px;
            cursor: pointer;
            width:100px;
            max-height: 140px;
            width:80px;
            max-height: 120px;
        }
    }
}
</style>